<template>
	<view>
		<!-- #ifndef MP-ALIPAY -->
		<nav-bar title="K线图"></nav-bar>
		<!-- #endif -->
		
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="u-m-t-30 u-chart">
			<view class="u-title u-p-20">
				<u-section title="K线图" line-color="#F74963" :right="false"></u-section>
			</view>
			<view style="flex: 1;qiun-rows;text-align: right;">
				<button type="default" size="mini" @tap="tapButton('in')">放大</button>
				<button type="default" size="mini" style="margin-left: 20upx;" @tap="tapButton('out')">缩小</button>
			</view>
			<view class="u-canvas">
				<canvas canvas-id="canvasCandle" id="canvasCandle" class="charts" disable-scroll=true @touchstart="touchCandle" @touchmove="moveCandle" @touchend="touchEndCandle"></canvas>
			</view>
			<view class="u-p-t-30">
				<slider :value="itemCount" min="5" :max="sliderMax" block-color="#f8f8f8" block-size="18" @changing="sliderMove" @change="sliderMove"/>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import uChartsList from '@/style/js/uCharts.data.js';
	var _self;
	var canvaCandle = null;
		
	export default {
		components: {
		},
		data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				itemCount:20,//x轴单屏数据密度
				sliderMax:50,
			}
		},
		onLoad(e) {
			_self = this;
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			this.getServerData();
		},
		methods: {
			getServerData(){
				// uni.request({
				// 	url: 'https://www.ucharts.cn/data.json',
				// 	data:{
				// 	},
				// 	success: function(res) {
				// 		console.log(res.data.data)
				// 		let Candle={categories:[],series:[]};
				// 		//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				// 		Candle.categories=res.data.data.Candle.categories;
				// 		Candle.series=res.data.data.Candle.series;
				// 		_self.showCandle("canvasCandle",Candle);
				// 	},
				// 	fail: () => {
				// 		_self.tips="网络错误，小程序端请检查合法域名";
				// 	},
				// });
				
				//本地数据模拟运行
				let Candle={categories:[],series:[]};
				Candle.categories = uChartsList.list.data.Candle.categories;
				Candle.series = uChartsList.list.data.Candle.series;
				_self.showCandle("canvasCandle",Candle);
			},
			showCandle(canvasId,chartData){
				canvaCandle=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'candle',
					fontSize:11,
					legend:{show:true},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,
					xAxis: {
						disableGrid:true,
						itemCount:_self.itemCount,
						scrollShow:true,
						scrollAlign:'right',
					},
					yAxis: {
						//disabled:true
						gridType:'dash',
						splitNumber:5,
						format:(val)=>{return val.toFixed(0)}
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					dataLabel: false,
					dataPointShape: true,
					extra: {
						candle:{
							color:{
								upLine:'#f04864',
								upFill:'#f04864',
								downLine:'#2fc25b',
								downFill:'#2fc25b'
							},
							average:{
								show:true,
								name:['MA5','MA10','MA30'],
								day:[5,10,30],
								color:['#1890ff', '#2fc25b', '#facc14']
							}
						},
						tooltip:{
							bgColor:'#000000',
							bgOpacity:0.7,
							gridType:'dash',
							dashLength:5,
							gridColor:'#1890ff',
							fontColor:'#FFFFFF',
							horizentalLine:true,
							xAxisLabel:true,
							yAxisLabel:true,
							labelBgColor:'#DFE8FF',
							labelBgOpacity:0.95,
							labelAlign:'left',
							labelFontColor:'#666666'
						}
					},
				});
				
			},
			touchCandle(e){
				canvaCandle.scrollStart(e);
			},
			moveCandle(e) {
				canvaCandle.scroll(e);
			},
			touchEndCandle(e) {
				canvaCandle.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaCandle.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			tapButton(type){
				let step=5;
				if(type=='in'){
					_self.itemCount -= step;
					if(_self.itemCount<=5){
						_self.itemCount=5;
					}
				}else{
					_self.itemCount += step;
					if(_self.itemCount>=_self.sliderMax){
						_self.itemCount=_self.sliderMax;
					}
				}
				_self.zoomCandle(_self.itemCount);
			},
			sliderMove(e){
				_self.itemCount=e.detail.value;
				_self.zoomCandle(e.detail.value);
			},
			zoomCandle(val) {
				canvaCandle.zoom({
					itemCount: val
				});
			}

			
		},
		onPageScroll(e) {
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	}
</script>

<style>
	page{background:#F2F2F2;width: 750upx;overflow-x: hidden;}
	.u-chart{background-color: #fff;display:flex; flex-direction:column !important;}
	.u-title{width: 750rpx;}
	.u-canvas{width: 750upx;position: relative;}
	.charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
	.charts3 {position: absolute;width: 250upx;height: 250upx;}
</style>
